<template>
  <div id="user-edit">
    <div class="main-box">
      <div class="header">编辑用户信息</div>
      <div class="cover-box">
        <div class="tip">头像</div>
        <div class="hint">点击修改头像</div>
        <div class="user-avatar">
          <img :src="logo | ipfsHash" alt="" v-if="logo != ''" />
          <el-upload
            class="upload-demo"
            action=""
            :on-change="onUploadChange"
            :auto-upload="false"
            accept=".jpeg,.png,.jpg,.gif,.svg"
          >
            <el-button class="upload-bg avatar-mask" size="small" type="primary"
              >点击上传</el-button
            >
          </el-upload>
          <!-- <div class="avatar-mask">点击上传</div> -->
        </div>
      </div>

      <!-- 昵称 -->
      <div class="username-box">
        <div class="tip">昵称</div>
        <el-input
          placeholder="请输入新的昵称"
          suffix-icon="el-icon-user-solid"
          v-model="nickname"
        ></el-input>
      </div>

      <!-- 账号 -->
      <div class="username-box">
        <div class="tip">账号</div>
        <el-input
          placeholder="请输入账号"
          suffix-icon="el-icon-user-solid"
          v-model="username"
        ></el-input>
      </div>

      <!-- 修改密码 -->
      <div class="username-box">
        <div class="tip">密码</div>
        <el-button @click="isShowUpdatePass = true" type="primary"
          >修改密码</el-button
        >
      </div>

      <!-- 简介 -->
      <div class="desc-box">
        <div class="tip">简介</div>
        <div class="hint">重新设置用户简介</div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入新的用户简介"
          v-model="info"
        ></el-input>
      </div>
      <div class="btn-group">
        <div class="submit-btn" @click="submitEdit">提交</div>
      </div>
    </div>
    <EditPassword
      :showFlag="isShowUpdatePass"
      @close="isShowUpdatePass = false"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { saveImageOnIpfs } from "@/utils/ipfsUtil";
import { updateInformation } from "@/api";
import EditPassword from "./EditPassword";
export default {
  name: "UserEdit",
  computed: {
    ...mapState({
      userInfo: (store) => store.user.userInfo,
    }),
  },
  components: {
    EditPassword,
  },
  data() {
    return {
      nickname: "",
      imgFile: null,
      logo: "",
      info: "",
      username: "",

      // 是否展示修改密码模态框
      isShowUpdatePass: false,
    };
  },
  watch: {
    userInfo: {
      immediate: true,
      handler(newValue) {
        if (newValue.introduction == null) {
          this.info = "";
        } else {
          this.info = newValue.introduction;
        }
        if (newValue.nickname == null) {
          this.nickname = "";
        } else {
          this.nickname = newValue.nickname;
        }
        if (newValue.logo == null) {
          this.logo = "";
        } else {
          this.logo = newValue.logo;
        }
        this.username = newValue.username;
      },
    },
  },
  mounted() {
    // 获取路由中的address
    // this.address = this.$route.params.address;
  },

  methods: {
    // 选取图片
    onUploadChange(file) {
      const isIMAGE =
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/png" ||
        file.raw.type === "image/jpg" ||
        file.raw.type === "image/gif" ||
        file.raw.type === "image/svg";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isIMAGE) {
        this.$message.error("只能上传jpg/png/gif/svg图片!");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }
      var reader = new FileReader();
      reader.readAsArrayBuffer(file.raw);
      console.log(file.raw);
      reader.onloadend = () => {
        // 保存图片到ipfs，获取图片hash
        saveImageOnIpfs(reader).then(async (hash) => {
          // 上传请求
          console.log(hash);
          this.logo = hash;
        });
      };
    },

    // 提交修改
    async submitEdit() {
      // 校验
      let { nickname, logo, info, username } = this;
      let params = {};
      if (info.trim() == "" || username.trim() == "") {
        this.$message.error("请完成信息填写");
        return;
      }
      params.username = username;
      params.introduction = info;
      if (logo.trim() != "") {
        params.logo = logo;
      }
      if (nickname.trim() != "") {
        params.nickname = nickname;
      }

      let result = await updateInformation(params);

      if (result.flag) {
        this.$message.success(result.msg);
        // 重新获取用户信息
        if (localStorage.getItem("token") != null) {
          this.$store.dispatch("userInfo");
        }
        // 返回跳转
        this.$router.go(-1);
      } else {
        this.$message.error(result.msg);
      }
    },
  },
};
</script>

<style lang='less'>
#user-edit {
  .main-box {
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 30px;
    max-width: 800px;
    padding-bottom: 30px;

    .tip {
      font-size: 16px;
      margin-bottom: 5px;
    }
    .hint {
      font-size: 14px;
      color: #999;
      margin-bottom: 5px;
    }
    .header {
      font-size: 22px;
      font-weight: bold;
    }
    .cover-box {
      margin-top: 20px;
      .user-avatar:hover {
        .avatar-mask {
          display: flex;
        }
      }
      .user-avatar {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        border: 1px solid #eee;
        background: rgba(0, 0, 0, 0.05);
        img {
          width: 100%;
          height: 100%;
        }
        .avatar-mask {
          cursor: pointer;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          justify-content: center;
          align-items: center;
          color: #fff;
          background: rgba(0, 0, 0, 0.2);
          display: none;
        }
      }
    }
    .username-box {
      margin-top: 20px;
    }
    .desc-box {
      margin-top: 20px;
    }
    .btn-group {
      margin-top: 20px;
      .submit-btn:hover {
        opacity: 0.4;
        transition: opacity 0.3s ease;
      }
      .submit-btn {
        cursor: pointer;
        transition: opacity 0.3s ease;
        padding: 8px 15px;
        border-radius: 99px;
        color: #fff;
        background: var(--themeColor1);
        display: inline-block;
      }
    }
  }
}
</style>